<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 演示</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
  var myChart = echarts.init(document.getElementById('main'));

  var option = {
    title: {
      text: 'ECharts 演示'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      axisLabel: {
        interval: 0
      },
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: {
      axisLine: {
        show: true
      },
    },
    series: [{
      name: '销售额',
      type: 'line',
      smooth: true, // 将折线图变为平滑曲线
      data: [120, 132, 101, 134, 90, 230, 210, 180, 190, 120, 110, 130],
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: 'rgba(235, 162, 54, 0.28)' // 渐变色起始颜色
        }, {
          offset: 1,
          color: 'rgba(238, 230, 159, 0)' // 渐变色结束颜色
        }])
      }
    }],
    //重点修改部分
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: '#ffec8b', // 虚线颜色
        width: 2,         // 虚线宽度
        opacity: 0.5     // 虚线透明度
      },
      shadowStyle: {
        color: 'rgba(237, 185, 86, 0.27)', // 阴影颜色
        shadowBlur: 10, // 阴影模糊程度
        shadowOffsetX: 2, // 阴影在 x 轴方向上的偏移量
        shadowOffsetY: 2  // 阴影在 y 轴方向上的偏移量
      },
      // 关键修改：将指示线的 zlevel 设置为 0，使阴影位于折线图下方
      zlevel: 0,
      // 关键修改：将指示线的 triggerOn 设置为 'none'，避免指示线遮挡阴影
      triggerOn: 'none',
      // 关键修改：设置指示线的 cursor 为 'default'，避免指示线出现手势
      cursor: 'default',
      // 关键修改：设置指示线的 handleSize 为 0，隐藏指示线上的手柄
      handleSize: 0
    }
  };

  myChart.setOption(option);

</script>
</body>
</html>
